<template>
	<!-- 我家的布局 -->
	<view class="homeLayout">
		<!-- 外层部分 -->
		<view class="family" v-for="family in families" :key="family.id">
			<view class="familyText">
				<view class="name">{{family.familyName}}</view>
				<view class="description">{{family.information}}</view>
			</view>
			<view class="room" v-for="room in family.rooms" :key="room.id">
				<view class="roomText">
					<view class="name">{{room.roomName}}</view>
					<view class="description">{{room.information}}</view>
				</view>
				<view class="equipment">
					<viewSensor v-for="equipment in room.equipments" :key="equipment.id" :obj="equipment" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
	import { readEquipmentByUserId } from "@/services/sysEquipmentApi";
	import { getStore } from "@/utils/getToken";
	import { ref } from "vue";

	/**
	 * 查询设备数据
	 * 根据use_id,返回3层嵌套对象数组
	 */
	let families = ref([])                                       // 含设备数组数据的房间数组对象,用于模版层渲染
	async function getFamilyRoomEquipmentByUserId() {
		await readEquipmentByUserId(getStore('id'))
			.then(res => {
				families.value = res.data
			}).finally(() => {
				uni.stopPullDownRefresh()                                // 停止下拉刷新动作
			})
	}

	/**
	 * 下拉刷新
	 */
	onPullDownRefresh(() => {
		getFamilyRoomEquipmentByUserId()
	})

	onShow(() => {
		getFamilyRoomEquipmentByUserId()                           // 每次切换页面刷新数据
	})
</script>

<style lang="scss" scoped>
	.homeLayout {
		height: 200vh; // 高度为整个视野
		background-color: #d3d3ff;

		photoSwiper {
			height: 420rpx;
		}

		.family {
			width: 730rpx;
			margin: 0rpx 10rpx 10rpx 10rpx; // 四个参数 上/右/下左
			border: 1px solid#eee;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
			background-color: #fafaff;

			.familyText {
				display: flex;
				justify-content: space-between; // 左右两端对齐
				height: 60rpx;
				margin: auto 40rpx;
				align-items: center;

				.name {
					display: inline;
					vertical-align: bottom;
					font-size: 32rpx;
					color: #761f31; // 字体颜色
				}

				.description {
					display: inline;
					vertical-align: bottom;
					font-size: 24rpx;
					color: #666; // 字体颜色
				}
			}

			.room {
				width: 710rpx;
				margin: 10rpx auto; // 两个参数 上下/左右
				border: 1px solid#e0e0ff;
				border-radius: 15rpx;
				box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
				background-color: #efefff;

				.roomText {
					display: flex;
					justify-content: space-between; // 左右两端对齐
					height: 50rpx;
					margin: auto 40rpx;
					align-items: center;

					.name {
						font-size: 30rpx; // 文字尺寸
						font-family: Microsoft YaHei; // 文字字体
						color: #614ca4; // 文字颜色
					}

					.description {
						display: inline;
						vertical-align: bottom;
						font-size: 24rpx;
						color: #666; // 字体颜色
					}
				}

				.equipment {
					display: flex; // 弹性布局
					flex-wrap: wrap; //允许换行
				}
			}
		}
	}
</style>